<template>
	<div class="support-left" v-if="async">
		<div class="support-left_xmpt">
			<div class="support-left_xt1">{{ textModel.siteId ? textModel.siteId : '选择项目' }}
				<el-select class="support-select_cxt" v-model="searchModel.siteId" placeholder="全部" size="mini"
					@change="selectChang('siteId', condition.projects, searchModel.siteId)">
					<el-option class="support-select_conter" v-for="item in condition.projects" :key="item.key"
						:label="item.value" :value="item.key">
						<div class="support-select_mli">
							<img class="support-select_cImg" :src="item.icon" />
							<span class="support-select_cTxt">{{ item.value }}</span>
						</div>
					</el-option>
				</el-select>
			</div>
			<div class="support-left_xcul">
				<div class="support-left_xcli" :class="{ 'support-left_xactive': typesIndex == tIndex }"
					v-for="(tItem, tIndex) in condition.types" :key="tIndex" @click="handleClick(tIndex, tItem)">{{ tItem.value }}
				</div>
			</div>
		</div>
		<div class="support-left_head">
			<div class="support-left_select" v-if="condition">
				<div class="support-select_sli">
					<div class="support-select_mark">
						<div class="support-select_mt1">处理人</div>
						<div class="support-select_mt2">{{ textModel.userId ? textModel.userId : '全部' }}</div>
						<i class="el-icon-caret-bottom support-select_mt3"></i>
					</div>
					<el-select class="support-select_cxt" v-model="searchModel.userId" placeholder="全部" size="mini"
						@change="selectChang('userId', condition.employees, searchModel.userId)">
						<el-option class="support-select_conter" v-for="item in condition.employees" :key="item.key"
							:label="item.value" :value="item.key">
							<div class="support-select_mli">
								<img class="support-select_cImg" :src="item.icon" />
								<span class="support-select_cTxt">{{ item.value }}</span>
							</div>
						</el-option>
					</el-select>
				</div>
				<div class="support-select_sli">
					<div class="support-select_mark">
						<div class="support-select_mt1">状态</div>
						<div class="support-select_mt2">{{ textModel.status ? textModel.status : '全部' }}</div>
						<i class="el-icon-caret-bottom support-select_mt3"></i>
					</div>
					<el-select class="support-select_cxt" v-model="searchModel.status" placeholder="全部" size="mini"
						@change="selectChang('status', condition.statuss, searchModel.status)">
						<el-option class="support-select_conter" v-for="item in condition.statuss" :key="item.key"
							:label="item.value" :value="item.key">
							<div class="support-select_mli">
								<img class="support-select_cImg" :src="item.icon" />
								<span class="support-select_cTxt">{{ item.value }}</span>
							</div>
						</el-option>
					</el-select>
				</div>
				<div class="support-select_sli">
					<div class="support-select_mark">
						<div class="support-select_mt1">优先级</div>
						<div class="support-select_mt2">{{ textModel.priority ? textModel.priority : '全部' }}</div>
						<i class="el-icon-caret-bottom support-select_mt3"></i>
					</div>
					<el-select class="support-select_cxt" v-model="searchModel.priority" placeholder="全部" size="mini"
						@change="selectChang('priority', condition.priorities, searchModel.priority)">
						<el-option class="support-select_conter" v-for="item in condition.priorities" :key="item.key"
							:label="item.value" :value="item.key">
							<div class="support-select_mli">
								<img class="support-select_cImg" :src="item.icon" />
								<span class="support-select_cTxt">{{ item.value }}</span>
							</div>
						</el-option>
					</el-select>
				</div>

				<div class="support-select_sli">
					<div class="support-select_mark">
						<div class="support-select_mt1">方式</div>
						<div class="support-select_mt2">{{ textModel.complete ? textModel.complete : '全部' }}</div>
						<i class="el-icon-caret-bottom support-select_mt3"></i>
					</div>
					<el-select class="support-select_cxt" v-model="searchModel.complete" placeholder="全部" size="mini"
						@change="selectChang('complete', condition.completes, searchModel.complete)">
						<el-option class="support-select_conter" v-for="item in condition.completes" :key="item.key"
							:label="item.value" :value="item.key">
							<div class="support-select_mli">
								<img class="support-select_cImg" :src="item.icon" />
								<span class="support-select_cTxt">{{ item.value }}</span>
							</div>
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="head-li">
				<el-autocomplete class="my-autocomplete" v-model="searchModel.keyword" :fetch-suggestions="querySearch"
					@select="selectItem" placeholder="标题或描述" size="mini">
					<i class="el-icon-search" slot="suffix"></i>
					<template slot-scope="{ item }">
						<div class="name">{{ item.name }}</div>
					</template>
				</el-autocomplete>
			</div>
			<div class="head-icon" :class="{ 'head-active': refreshFool }" @click="refreshTab">
				<i class="el-icon-refresh"></i>
			</div>
		</div>
		<div class="support-left_box">
			<ul class="box_ul" v-if="viewModel && viewModel.result && viewModel.result.length != 0">
				<li class="box_li" :class="{ 'box_active': listId == item.id }" v-for="(item, index) in viewModel.result"
					:key="index" @click="selectItem(item)">
					<div class="box_li-nub1">{{ item.serialNumber }}</div>
					<p class="p2-text">{{ item.name }}</p>
					<img class="box_li-nub2" :src="item.priorityIcon" />
					<div class="box_li-nub3">
						<div class="box_li-xt1" :style="'background:' + item.statusLabel.color + ';'"></div>
						<div class="box_li-xt2" :style="'color:' + item.statusLabel.color + ';'">{{ item.statusLabel.text }}</div>
					</div>
					<div class="box_li-p3">
						<div class="box_li-xt1" :style="'background:' + item.projectLabel.color + ';'"></div>
						<div class="box_li-xt2" :style="'color:' + item.projectLabel.color + ';'">{{ item.projectLabel.text }}</div>
					</div>
					<div class="box_li-nub3">
						<img class="box_li-nuImg" :src="$ala.urlImage(item.avator)" />
					</div>
				</li>
			</ul>
			<zk-nodata v-else></zk-nodata>
		</div>
		<div class="support-left_footer" v-if="viewModel">
			<span>{{ viewModel.pageIndex }}/{{ viewModel.pageCount }}</span>
			<i class="el-icon-arrow-left" :class="{ 'footer-icolor_active': viewModel.pageIndex == 1 }"
				@click="previousPage"></i>
			<i class="el-icon-arrow-right" :class="{ 'footer-icolor_active': viewModel.pageIndex == viewModel.pageCount }"
				@click="nextPage"></i>
		</div>
	</div>
</template>
<script>
import ala from 'ala'
import service from './../service'
export default {
	data () {
		return {
			async: false,
			condition: null, // 过滤条件
			searchModel: {
				siteId: null, // 项目Id
				type: null, // 类型
				status: null, //状态
				priority: null, // 优先级
				userId: ala.userId(), // 处理人,
				complete: null, // 完成方式
				keyword: null, // 搜索关键字
				pageSize: 30,
				pageIndex: 1 // 页码
			},
			textModel: {},
			viewModel: null, //  数据
			typesIndex: 0,
			listId: '',
			refreshFool: false
		}
	},
	created () {
		this.init()
	},
	methods: {
		async init () {
			this.condition = await service.condition()
			if (this.condition) {
				var employee = this.condition.employees.find(r => r.key === ala.userId())
				if (employee) {
					this.textModel.userId = employee.value
				}
			}
			this.handleClick(this.typesIndex, this.condition.types[this.typesIndex])
			var this_ = this
			setTimeout(() => {
				this_.async = true
				var supportData = ala.localGet('support_select_init')
				if (supportData) {
					this_.selectItem(supportData)
				} else {
					if (this_.viewModel) {
						this_.selectItem(this_.viewModel.result[0])
					}
				}
			}, 200)
		},
		refreshTab () {
			this.refreshFool = true
			this.initInif()
		},
		async initInif () {
			this.viewModel = await service.data(this.searchModel)
			setTimeout(() => {
				this.refreshFool = false
			}, 1500)
		},
		selectItem (data) {
			// if (data.id) {
			// 	this.$router.push(`/Admin/Support/Index?id=${data.id}`)
			// }
			ala.localSet('support_select_init', data)
			this.listId = data.id
			this.$emit('change', data, this.condition)
		},
		async querySearch (queryString, cb) {
			var restaurants = this.viewModel.result
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			cb(results)
		},
		createFilter (queryString) {
			return (restaurant) => {
				var result = restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1
				return result
			}
		},
		async selectChang (type, data, value) { //下拉选择操作
			this.searchModel.pageIndex = 1
			this.selectInit(type, data, value)
			this.initInif()
		},
		previousPage () { //上一页
			ala.localSet('support_select_init', null)
			if (this.viewModel.pageIndex === 1) {
				return
			}
			this.searchModel.pageIndex = this.viewModel.pageIndex - 1
			this.initInif()
		},
		nextPage () { //下一页
			ala.localSet('support_select_init', null)
			if (this.viewModel.pageIndex === this.viewModel.pageCount) {
				return
			}
			this.searchModel.pageIndex = this.viewModel.pageIndex + 1
			this.initInif()
		},
		selectInit (type, data, value) { //选择对应的值变化
			if (!value) {
				return
			}
			var arr = data.filter(val => val.key === value)
			this.$set(this.textModel, type, arr[0].value)
		},
		handleClick (index, data) { //tab操作
			this.typesIndex = index
			this.searchModel.type = data.key
			this.initInif()
		}
	}
}
</script>
<style lang="scss">
@import "./support-left.scss";
</style>